<template>
  <div class="page">
    <v-pageTitle title="审核列表"></v-pageTitle>
    
    <el-row type="flex" justify="space-around">
      <el-col :span="11">
        <!--工具条-->
        <v-pageToolbar align='left'>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <h4>待审核工单</h4>
            </el-form-item>
          </el-form>
        </v-pageToolbar>
				<v-pageTable>
						<el-table v-loading="tableData1.loading" :data="tableData1.body" border style="width: 100%">
							<!--<el-table-column v-for="(item,index) in tableData1.head" :prop="item.key" :label="item.name" :key="index"  min-width="150" align="center">
                <template slot-scope="scope">
                  <el-tag
                    type="error">{{scope.row.item.key}}</el-tag>
                </template>
              </el-table-column>-->
              <el-table-column prop="today" label="今日" min-width="120" align="center">
                <template slot-scope="scope">
                  <a href="javascript:;" @click='click(scope.row.today)'>
                    <el-tag
                    type="error">{{scope.row.today}}</el-tag>
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="yesterday" label="昨日" min-width="120" align="center">
                <template slot-scope="scope">
                  <a href="javascript:;" @click='click(scope.row.yesterday)'>
                    <el-tag
                    type="error">{{scope.row.yesterday}}</el-tag>
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="sum" label="全部" min-width="120" align="center">
                <template slot-scope="scope">
                  <a href="javascript:;" @click='click(scope.row.sum)'>
                    <el-tag
                    type="error">{{scope.row.sum}}</el-tag>
                  </a>
                </template>
              </el-table-column>
						</el-table>
				</v-pageTable>
      </el-col>
      <el-col :span="11">
        <!--工具条-->
        <v-pageToolbar align='left'>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <h4>提醒审核工单</h4>
            </el-form-item>
          </el-form>
        </v-pageToolbar>
				<v-pageTable>
						<el-table v-loading="tableData2.loading" :data="tableData2.body" border style="width: 100%">
							<el-table-column prop="active" label="提醒数" min-width="120" align="center">
                <template slot-scope="scope">
                  <a href="javascript:;" @click='click(scope.row.active)'>
                    <el-tag
                    type="error">{{scope.row.active}}</el-tag>
                  </a>
                </template>
              </el-table-column>
						</el-table>
				</v-pageTable>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="23">
        <!--工具条-->
        <v-pageToolbar align='left'>
          <el-form :inline="true" :model="formSearch" class="demo-form-inline">
						<el-row>
							<el-col :span="3">
								<el-form-item label="">
									<h4>审核列表</h4>
								</el-form-item>
							</el-col>
							<el-col :span="21">
								<el-form-item label="状态">
									<el-select size="small" v-model="formSearch.statue" placeholder="请选择">
										<el-option
											v-for="item in formSearch.options"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="登记时间">
									<el-date-picker
                    size="small"
										v-model="formSearch.valueMonth"
										type="date"
										placeholder="选择日期"
										:picker-options="formSearch.pickerOptions0">
									</el-date-picker>
								</el-form-item>
								<el-form-item>
									<el-button size="small"  type="primary" @click="onSearch">查询</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
        </v-pageToolbar>
        <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="center">
						<el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" :row-style="isActive" :default-sort="{prop: 'date', order: 'descending'}">
								<el-table-column type="index" label="序号" width="80" align="center">
								</el-table-column>
								<el-table-column prop="date" label="日期" width="120" sortable>
								</el-table-column>
								<el-table-column prop="content" label="内容" min-width="180" sortable>
								</el-table-column>
								<el-table-column prop="regestDate" label="登记时间" width="120" sortable>
								</el-table-column>
                <el-table-column prop="regestor" label="登记人" width="100" sortable>
								</el-table-column>
								<el-table-column prop="auditor" label="审核人" width="100" sortable>
								</el-table-column>
								<el-table-column prop="statue" label="状态" width="120" sortable>
									<template slot-scope="scope">
										<el-tag
											:type="scope.row.statue | statusFilterType">{{scope.row.statue | statusFilter}}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="reason" label="未通过原因" min-width="180" sortable>
								</el-table-column>
								<el-table-column fixed="right" label="操作" min-width="120">
										<template slot-scope="scope">
											<el-button  @click="handleClick(scope.$index, scope.row)" type="text" size="small"><i class="fa fa-hand-o-up fa-lg"></i></el-button>
											<el-button  type="text" size="small"><i class="fa fa-bell-o fa-lg"></i></el-button>
											<el-button  type="text" size="small"><i class="fa fa-share-alt fa-lg"></i></el-button>
										</template>
								</el-table-column>
						</el-table>
				</v-pageTable>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
  export default {
    data() {
			return{
				tableData1: {
            loading: true,
            head: [],
            body: []
				},
				tableData2: {
            loading: true,
            head: [],
            body: []
				},
				formSearch:{
					valueMonth: new Date(),
					options: [
            {
							value: 0,
							label: '全部'
						},
						{
							value: 1,
							label: '未审核'
						}, {
							value: 2,
							label: '已提醒'
						}, {
							value: 3,
							label: '未审核'
						}, {
							value: 4,
							label: '审核不通过'
						}
					],
					statue: 0,
					pickerOptions0: {
						disabledDate(time) {
							return time.getTime() >= Date.now();
						}
					}
        },
				tableData: {
            loading: true,
            body: []
				},
				paginationTotal: 100,
        sels:[]
			}
		},
		filters: {
      statusFilter(statue) {
        const statusMap = ['审核通过','已提醒','未审核','审核不通过']
        return statusMap[statue]
      },
      statusFilterType(statue) {
        const statusMapType = ['primary','success','danger','error']
        return statusMapType[statue]
      }
    },
    methods: {
      getTableData() {
          // ajax 查询表格数据
          this.tableData1.head = [
              {
                  key: 'today',
                  name: '今日'
              },
              {
                  key: 'yesterday',
                  name: '昨日'
              },
              {
                  key: 'sum',
                  name: '全部'
              }
          ]
          this.tableData1.body = [
            {
              today: 10,
              yesterday: 12,
              sum: 50
            }
					]
					this.tableData2.head = [
              {
                  key: 'active',
                  name: '提醒数'
              }
          ]
          this.tableData2.body = [
            {
              active: 10
            }
          ]
          // 模拟加载
          setTimeout(() => {
							this.tableData1.loading = false
							this.tableData2.loading = false
          }, 1000)
			},
			getTableAuditData() {
          // ajax 查询表格数据
          this.tableData.body = [
            {
              id: 1,
              date: '2016-01-04',
              content: '今天干了嘛？',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: 'Jesen',
              statue: 3,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 2,
              date: '2016-02-01',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: '许静海',
              statue: 2,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 3,
              date: '2016-11-03',
              content: '没干好啊！',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: 'ZZZ',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 4,
              date: '2016-12-02',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: 'Jesen',
              statue: 0,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 5,
              date: '2016-04-04',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: '郑山',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 6,
              date: '2016-06-01',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: '吴先锋',
              statue: 3,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 7,
              date: '2016-07-03',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: '陈光明',
              statue: 0,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 8,
              date: '2016-03-02',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: '曾建清',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              id: 9,
              date: '2016-12-04',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: 'Audit',
              statue: 0,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            },{
              id: 13,
              date: '2016-05-01',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              regestor:'张宗昭',
              auditor: '张晓萌',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      //状态显示转换
      isActive: function (row) {
        // return row.statue == 3 ? { "color": "red" } : {};
			},
			onSearch(){
        console.log(this.formSearch)
      },
      sizeChange(val){
        console.log(val)
        this.getTableData()
      },
      pageChange(val){
        console.log(val)
        this.getTableData()
      },
      click(data){
        console.log(data)
      },
      handleClick(index,row) {
				console.log(row);
				// this.$router.push({ name: 'orderAudit/detail', query:{obj:Object.assign({}, row)}, params:{obj:Object.assign({}, row)} })
        this.$router.push({ path: '/orderAudit/detail', query:{obj: row.id+','+row.date+','+row.regestor+','+row.statue} })
      }
    },
    mounted() {
      // 获取table数据
			this.getTableData()
			this.getTableAuditData()
    }
  }
</script>